<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            position: absolute;
            background-color: orange;
        }
        .clipa{
            clip: rect(20px auto auto auto);
        }
        .clipb{
            clip: rect(auto 20px auto auto);
            left: 250px;
        }
        .clipc{
            clip: rect(auto auto 20px auto);
            left: 500px;
        }
        .clipd{
            clip: rect(auto auto auto 20px);
            top: 250px;
            left: 250px;
        }
        .clipe{
            clip: rect(auto auto auto auto);
            top: 250px;
        }
        .clipf{
            clip: rect(20px 180px 180px 20px);
            top: 250px;
            left: 500px;
        }
    </style>
</head>
<body>
    <div class="clipa">rect(20px auto auto auto)
         依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0； 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即
        右-下 方位的auto值为盒子的实际宽度和高度； 示例：clip:rect(auto 50px 20px auto)
    </div>
    <div class="clipb">rect(auto 20px auto auto)
        依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0； 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即
        右-下 方位的auto值为盒子的实际宽度和高度； 示例：clip:rect(auto 50px 20px auto)
    </div>
    <div class="clipc">rect(auto auto 20px auto)
        依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0； 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即
        右-下 方位的auto值为盒子的实际宽度和高度； 示例：clip:rect(auto 50px 20px auto)
    </div>
    <div class="clipd">rect(auto auto auto 20px)
        依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0； 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即
        右-下 方位的auto值为盒子的实际宽度和高度； 示例：clip:rect(auto 50px 20px auto)
    </div>
    <div class="clipe">rect(auto auto auto auto)
        依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0； 右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即
        右-下 方位的auto值为盒子的实际宽度和高度； 示例：clip:rect(auto 50px 20px auto)
    </div>
    <div class="clipf">rect(120px 180px 180px 20px) 
        依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用auto替换，即此边不剪切。 上-左 方位的裁剪：从0开始剪裁直到设定值，即 上-左 方位的auto值等同于0；
        右-下 方位的裁剪：从设定值开始剪裁直到最右边和最下边，即 右-下 方位的auto值为盒子的实际宽度和高度； 示例：clip:rect(auto 50px 20px auto)
    </div>
</body>
</html>